<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 以借助 script 标签直接通过 CDN 来使用 Vue： -->
    <script src="./JS/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>今天天气很{{info}}</h2>
      <button @click="changeWeather">切换天气</button>
      <h3>a的值是：{{numbers.a}}</h3>
      <h3>b的值是：{{numbers.b}}</h3>
      <button @click="numbers.a++">a加1</button>
      <button @click="numbers.b++">b加1</button>
      <button @click="numbers={a:666,b:888}">numbers</button>
    </div>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            isHot: true,
            numbers: {
              a: 1,
              b: 1,
            },
          };
        },
        computed: {
          info() {
            return this.isHot ? "炎热" : "凉爽";
          },
        },
        methods: {
          changeWeather() {
            this.isHot = !this.isHot;
          },
        },
        watch: {
          // isHot: {
          //   // //初始化时让 handler 调用
          //   // immediate: true,
          //   // //handler当ishot发生改变时调用
          //   // handler(newVlue, oldValue) {
          //   //   console.log("修改", newVlue, oldValue);
          //   // },
          //   // "numbers.a": {
          //   //   handler() {
          //   //     console.log("a变化了");
          //   //   },
          //   // },
          //   numbers: {
          //     deep: true, //深度监视
          //     handler() {
          //       console.log("numbers改变了");
          //     },
          //   },
          // },
        },
      });
    </script>
  </body>
</html>
